<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转动的border</title>
    <script src="js/jquery-1.7.2.js"></script>
</head>
<body>
<style>
    .bb {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 200px;
        height: 200px;
        margin: auto;
        background: no-repeat 50%/70% rgba(0,0,0,.1);
        color: #69ca62;
        box-shadow: inset 0 0 0 1px rgba(105,202,98,.5);
    }
    .bb::after, .container-desc .bb::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        content: '';
        z-index: -1;
        margin: -5%;
        box-shadow: inset 0 0 0 2px;
        animation: clipMe 8s linear infinite;
    }
    .bb::after, .bb::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0
    }
    .bb::after, .bb::before {
        content: '';
        z-index: -1;
        margin: -5%;
        box-shadow: inset 0 0 0 2px;
        animation: clipMe 8s linear infinite;
    }

     .bb::before {
        animation-delay: -4s
    }

    @keyframes clipMe {
        0%, 100% {
            clip: rect(0, 220px, 2px, 0)
        }
        25% {
            clip: rect(0, 2px, 220px, 0)
        }
        50% {
            clip: rect(218px, 220px, 220px, 0)
        }
        75% {
            clip: rect(0, 220px, 220px, 218px)
        }
    }

</style>
<div class="col-md-3">
    <div class="bb">
    </div>
</div>

</body>
</html>